<template>
    <div style="margin: 0 10px">
        <div class="toolbar">
            <div class="filter">
                <div>
                    <el-date-picker size="small" v-model="filter.time" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                                    start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
                </div>
                <div>
                    <el-input v-model.trim="filter.username" clearable="" placeholder="用户名" size="small"></el-input>
                </div>
                <div>
                    <el-button type="primary" size="small" @click="doQuery()">查询</el-button>
                    <el-button size="small" @click="doQuery(true)">重置</el-button>
                </div>
            </div>
        </div>

        <el-table v-loading = "loading" :data="list" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <pre><code>{{ JSON.stringify(JSON.parse(scope.row.context), undefined, 4) }}</code></pre>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="action" label="操作"></el-table-column>
            <el-table-column prop="user.username" label="管理员"></el-table-column>
            <el-table-column prop="created_at" label="时间"></el-table-column>
        </el-table>
        <el-pagination class="table" :current-page.sync="currentPage" :page-size.sync="pageSize" :pager-count="11"
                       background layout="total, sizes, prev, pager, next" :total="totalPage">
        </el-pagination>


    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                loading: false,
                currentPage: 1,
                totalPage: 0,
                pageSize: 10,
                filter: {time: [], username: null},
                list: [],
            }
        },
        created() { this.get(); },
        watch: {
            currentPage() { this.get(); },
            pageSize() { this.get(); }
        },
        methods: {
            doQuery(reset) {
                if (reset) {
                    this.filter.time = [];
                    this.filter.username = null;
                }
                this.currentPage === 1 ? this.get() : (this.currentPage = 1);
            },
            async get() {
                this.loading = true;
                const params = {page: this.currentPage, size: this.pageSize, filter: this.filter};
                const result = await axios.get('/sys/log', {params});
                this.loading = false;
                this.totalPage = result.total;
                this.list = result.list;
            },
        }
    }
</script>
